{% load static %}
<!DOCTYPE html>

{% block css %}
    <style>

        .title {
            color: #050000;
            text-decoration: none;
            font-weight: bold;
            font-size: 16px;
        }

        .account {
            width: 60%;
            height: 734.1px;
            margin: 0 auto;
            float: left;
            background-image: url("{% static 'src/1.1.jpg' %}");
            background-size: 110%;
        }

        h1 {
            text-align: center;
        }

        .ups {
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: flex-start;
            flex-wrap: wrap;
            clear: both;
            width: 1080px;
            background-size: cover;
        }

        .panel-body {
            padding: 0;
            display: flex;
            flex-direction: row;
            justify-content: left;
            align-items: flex-start;
            flex-wrap: wrap;
            clear: both;
            margin-top: 20px;
            width: 100%;
            border-radius: 10px;
        }


        .pic {
            float: left;
            margin-left: 50px;
            border-radius: 5px;
            background-size: cover;
            background-repeat: no-repeat;
            width: 800px;
            height: 450px;
            border: 2px solid #000;
            box-sizing: border-box;
            padding: 0;
        }

        .panel-body > .item > .info a {
            text-decoration: none;
        }

        .item {
            border-radius: 6px;
            width: 342px;
            height: 192px;
            border: 1px solid #dddddd;
            margin: 20px 10px;
            background-repeat: no-repeat;
            background-size: cover;
            box-sizing: border-box;
            padding: 0;
        }

        .panel-body > .item:hover {
            border: 1px solid #f0ad4e;
        }

        .info {
            width: 342px;
            padding: 10px 10px;
            display: flex;
            justify-content: space-between;
            border-bottom-left-radius: 6px;
            border-bottom-right-radius: 6px;
            color: #8c8c8c;
        }

        .infor {
            font-size: 20px;
            width: 800px;
            margin-left: 50px;
        }

        .head {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-size: cover;
            border: 2px solid #000;
            padding: 0;
        }

        .head1 {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-size: cover;
            border: 2px solid #000;
            padding: 0;
        }

        .panel-container {
            clear: both;
            background-image: url("{% static 'src/2.jpg' %}");
            background-size: 100%;
        }

        .labels1 {
            background-size: 100%;
            height: 200px;
            width: 100%;

        }

        .label1 {
            background-size: 1080px;
            border-radius: 5px;
            font-size: 15px;
            border: 1px solid #000;
            background-color: #5cb85c;
            padding: 0;
            display: inline-flex;
            text-align: center;
            margin-left: 5px;
            margin-top: 10px;
        }

        .up_name2 {
            font-size: 20px;
            font-weight: bold;
        }

        .anal {
            width: 40%;
            float: right;
            background-image: url("{% static 'src/1.2.jpg' %}");
            background-size: 100%;
        }

        #box {
            margin: auto;
            width: 1600px;
            height: 400px;
            background-image: url("{% static 'src/3.jpg' %}");
            background-size: 100%;
        }
    </style>
{% endblock %}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}
        {{ video.video_name }}
    {% endblock %}</title>
    <link rel="stylesheet" href="{% static 'plugins/bootstrap-3.4.1/css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/manage.css' %}">
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
    <script src="{% static 'js/echarts.min.js' %}"></script>
</head>
<body>

<nav class="navbar navbar-av">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                    data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="{% url 'showlist' way='知识' %}"><
                <返回
            </a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                       aria-expanded="false">用户：{{ request.user_object.username }} <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="{% url 'index' %}">首 页</a></li>
                        <li role="separator" class="divider"></li>
                        <li><a href="{% url 'logout' %}">退 出</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</nav>

{% block content %}
    <body>
    <div class="account">
        <h1 id="data_index">{{ video.video_name }}</h1>
        <form method="post" novalidate>
            {% csrf_token %}
            <div style="color: #0f0f0f">
                <a href="{{ video.vid_link }}">
                    <div class="pic" style="background-image:url('{{ video.pic_link }} ');">
                    </div>
                </a>

                <div class="infor">
                    <span>播放量：{{ video.views }}</span>
                    <span>投币量：{{ video.coins }}</span>
                    <span>点赞量：{{ video.favorites }}</span>
                    <span>收藏量：{{ video.likes }}</span>
                    <span>弹幕量：{{ video.barrage }}</span>
                    <p>视频作者：</p>
                    <div class="ups">
                        {% for up in up_list %}
                            <a href="{% url 'upvideo' up_name=up.up_name %}">
                                <div class="head" style="background-image:url('{{ up.up_head }} ');">
                                </div>
                            </a>

                            <p style="margin-top: 30px">[{{ up.up_name }}]</p>
                        {% endfor %}
                    </div>
                    <span class="labels1">视频标签：
                        {% for tag in video.tag_names %}
                            <div class="label1" style="">
                            {{ tag }}
                            </div>
                        {% endfor %}
                    </span>
                </div>
            </div>
        </form>

    </div>
    <div class="anal">
        <p style="font-size:30px;">本视频的以下标签使其拥有如此高的播放量：</p>
        {% for tag in tag_anal %}
            <p>
                【{{ tag.tag }}】该标签平均播放量{{ tag.avg_views }},平均弹幕数：{{ tag.avg_barrage }}，<br>平均点赞比：{{ tag.avg_likes_to_views_ratio }}，平均投币比：{{ tag.avg_coins_to_views_ratio }}，<br>平均收藏比：{{ tag.avg_favorites_to_views_ratio }}
            </p>
        {% endfor %}
        <p style="font-size:30px;">看过本视频的人都喜欢这些up主：</p>
        {% for up in up_command %}
            <span class="up_name2">
            <a href="{% url 'upvideo' up_name=up.up_name %}">
                <div class="head1" style="background-image:url('{{ up.up_head }} ');">
            </div>
            </a>

            【{{ up.up_name }}】，粉丝数：{{ up.up_fans }}
            </span>
        {% endfor %}
    </div>
    <div class="panel-container">
        <p style="font-size:30px;margin-left: 20px"> 推荐视频</p>
        <div class="panel-body" style="" id="list-container">
            {% for item in total_command %}
                <div>
                    <a href="{% url 'showdetail' video_name=item.video_name %}">
                        <div class="item" style="background-image:url('{{ item.pic_link }} ')">
                        </div>
                    </a>
                    <div class="info">
                        <div>
                            <span style="color: #020000;float: initial;">
                                <a href="{% url 'showdetail' video_name=item.video_name %}" class="title"
                                   style="color: #050000;">
                                {{ item.video_name }}
                                </a>
                                <span>播放量：{{ item.views }}</span>
                                <p>相似度：{{ item.weighted_similarity }}</p>
                            </span>
                        </div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
    <div id="box">
    </div>
    <script>
        var myChart = echarts.init(document.getElementById('box'));
        var data_index = document.getElementById("data_index")
        var index = data_index.innerText;
        var data_number = "data{}".replace("{}", index)
        var data_max = "max{}".replace("{}", index)
        var data_mean = "mean{}".replace("{}", index)
        var up_name = "up_name{}".replace("{}", index)
        $.get("{% static "src/allhot100info.json" %}", function (data) {
            var options = {
                title: {
                    text: '基本数据' + '\n' +
                        '视频名称:' + index + '\n'
                        + '作者名称:' + data[up_name],
                    textStyle: {
                        color: '#0b0c47',
                        fontStyle: 'normal',
                        fontWeight: 'normal',
                        fontFamily: 'sans-serif',
                        fontSize: 12,
                        lineHeight: 12,
                    },
                    textAlign: 'center',
                    left: '25%',
                    top: '70%'
                },
                graphic: [{
                    type: 'text',
                    left: '51%',
                    top: '70%',
                    style: {
                        text: '数据对比' + '\n'
                            + '视频名称:' + index + '\n'
                            + '作者名称:' + data[up_name],
                        fill: '#0b0c47',
                        textAlign: 'center',
                        fontSize: 12,
                        lineHeight: 18,
                    }
                }],
                legend: {
                    orient: 'vertical',
                    icon: 'circle',
                    left: 'left',
                    textStyle: {
                        fontSize: 12,
                        color: "#333",
                        padding: [0, 0, 0, -8], // 修改文字和图标距离
                    },
                },
                tooltip: {},
                radar: [
                    {
                        indicator: [
                            {name: '播放量', max: Math.max(data[data_number][0], data[data_mean][0])},
                            {name: '弹幕数', max: Math.max(data[data_number][1], data[data_mean][1])},
                            {name: '点赞数', max: Math.max(data[data_number][2], data[data_mean][2])},
                            {name: '投币数', max: Math.max(data[data_number][3], data[data_mean][3])},
                            {name: '收藏数', max: Math.max(data[data_number][4], data[data_mean][4])}
                        ],
                        center: ['60%', '35%'],
                        radius: '50%',
                        startAngle: 90,
                        splitNumber: 4,
                        shape: 'circle',
                        axisLabel: {
                            textStyle: {
                                color: 'red'
                            }
                        },
                        axisName: {
                            color: '#',
                            backgroundColor: '#666',
                            borderRadius: 3,
                            padding: [3, 5]
                        },
                    },
                ],
                series: [
                    {
                        name: data[up_name] + '  视频数据  ',
                        type: 'pie',
                        radius: '50%',
                        center: ['25%', '35%'],
                        data: [
                            {value: data[data_number][0], name: "播放量"},
                            {value: data[data_number][1], name: "弹幕数"},
                            {value: data[data_number][2], name: "点赞数"},
                            {value: data[data_number][3], name: "投币数"},
                            {value: data[data_number][4], name: "收藏数"}
                        ],
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                            },
                        },
                    },
                    {
                        type: 'radar',
                        emphasis: {
                            lineStyle: {
                                width: 4
                            }
                        },
                        data: [
                            {
                                value: [data[data_mean][0],
                                    data[data_mean][1],
                                    data[data_mean][2],
                                    data[data_mean][3],
                                    data[data_mean][4]],
                                name: "平均数据",
                                symbol: 'rect',
                                symbolSize: 3,
                                lineStyle: {
                                    type: "dashed"
                                },
                            },
                            {
                                value: [data[data_number][0],
                                    data[data_number][1],
                                    data[data_number][2],
                                    data[data_number][3],
                                    data[data_number][4]],
                                name: '视频数据',
                                areaStyle: {
                                    color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                                        {
                                            color: 'rgba(255, 145, 124, 0.1)',
                                            offset: 0
                                        },
                                        {
                                            color: 'rgba(255, 145, 124, 0.9)',
                                            offset: 1
                                        }
                                    ])
                                },
                            }
                        ]
                    }
                ],
            };
            myChart.setOption(options);
            var currentIndex = 0;
            var intervalId = setInterval(function () {
                var datalen = options.series[0].data.length;
                myChart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: currentIndex});
                currentIndex = (currentIndex + 1) % datalen;
                myChart.dispatchAction({
                    type: 'highlight', seriesIndex: 0, dataIndex: currentIndex
                });
                myChart.dispatchAction({
                    type: 'showTip', seriesIndex: 0, dataIndex: currentIndex
                });
            }, 1000);
            myChart.on('mouseover', function () {
                var datalen = options.series[0].data.length;
                myChart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: currentIndex});
                clearInterval(intervalId);
            });
            myChart.on('mouseout', function () {
                intervalId = setInterval(function () {
                    var datalen = options.series[0].data.length;
                    myChart.dispatchAction({type: 'downplay', seriesIndex: 0, dataIndex: currentIndex});
                    currentIndex = (currentIndex + 1) % datalen;
                    myChart.dispatchAction({
                        type: 'highlight', seriesIndex: 0, dataIndex: currentIndex
                    });
                    myChart.dispatchAction({
                        type: 'showTip', seriesIndex: 0, dataIndex: currentIndex
                    });
                }, 1000);
            });
        });
    </script>
    </body>
{% endblock %}

<script>
    (function fairyDustCursor() {

        var possibleColors = ["#D61C59", "#E7D84B", "#1B8798"]
        var width = window.innerWidth;
        var height = window.innerHeight;
        var cursor = {x: width / 2, y: width / 2};
        var particles = [];

        function init() {
            bindEvents();
            loop();
        }


        function bindEvents() {
            document.addEventListener('mousemove', onMouseMove);
            window.addEventListener('resize', onWindowResize);
        }

        function onWindowResize(e) {
            width = window.innerWidth;
            height = window.innerHeight;
        }

        function onMouseMove(e) {
            cursor.x = e.clientX;
            cursor.y = e.clientY;

            addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
        }

        function addParticle(x, y, color) {
            var particle = new Particle();
            particle.init(x, y, color);
            particles.push(particle);
        }

        function updateParticles() {


            for (var i = 0; i < particles.length; i++) {
                particles[i].update();
            }


            for (var i = particles.length - 1; i >= 0; i--) {
                if (particles[i].lifeSpan < 0) {
                    particles[i].die();
                    particles.splice(i, 1);
                }
            }

        }

        function loop() {
            requestAnimationFrame(loop);
            updateParticles();
        }


        function Particle() {

            this.character = "*";
            this.lifeSpan = 120; //ms
            this.initialStyles = {
                "position": "fixed",
                "display": "inline-block",
                "top": "0px",
                "left": "0px",
                "pointerEvents": "none",
                "touch-action": "none",
                "z-index": "10000000",
                "fontSize": "25px",
                "will-change": "transform"
            };


            this.init = function (x, y, color) {

                this.velocity = {
                    x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
                    y: 1
                };

                this.position = {x: x + 10, y: y + 10};
                this.initialStyles.color = color;

                this.element = document.createElement('span');
                this.element.innerHTML = this.character;
                applyProperties(this.element, this.initialStyles);
                this.update();

                document.querySelector('.js-cursor-container').appendChild(this.element);
            };

            this.update = function () {
                this.position.x += this.velocity.x;
                this.position.y += this.velocity.y;
                this.lifeSpan--;

                this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px, 0) scale(" + (this.lifeSpan / 120) + ")";
            }

            this.die = function () {
                this.element.parentNode.removeChild(this.element);
            }

        }


        function applyProperties(target, properties) {
            for (var key in properties) {
                target.style[key] = properties[key];
            }
        }

        if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init();
    })();
</script>
<script>
    var stop, staticx;
    var img = new Image();
    img.src = "";

    function Sakura(x, y, s, r, fn) {
        this.x = x;
        this.y = y;
        this.s = s;
        this.r = r;
        this.fn = fn;
    }

    Sakura.prototype.draw = function (cxt) {
        cxt.save();
        var xc = 40 * this.s / 4;
        cxt.translate(this.x, this.y);
        cxt.rotate(this.r);
        cxt.drawImage(img, 0, 0, 40 * this.s, 40 * this.s)
        cxt.restore();
    }

    Sakura.prototype.update = function () {
        this.x = this.fn.x(this.x, this.y);
        this.y = this.fn.y(this.y, this.y);
        this.r = this.fn.r(this.r);
        if (this.x > window.innerWidth ||
            this.x < 0 ||
            this.y > window.innerHeight ||
            this.y < 0
        ) {
            this.r = getRandom('fnr');
            if (Math.random() > 0.4) {
                this.x = getRandom('x');
                this.y = 0;
                this.s = getRandom('s');
                this.r = getRandom('r');
            } else {
                this.x = window.innerWidth;
                this.y = getRandom('y');
                this.s = getRandom('s');
                this.r = getRandom('r');
            }
        }
    }

    SakuraList = function () {
        this.list = [];
    }
    SakuraList.prototype.push = function (sakura) {
        this.list.push(sakura);
    }
    SakuraList.prototype.update = function () {
        for (var i = 0, len = this.list.length; i < len; i++) {
            this.list[i].update();
        }
    }
    SakuraList.prototype.draw = function (cxt) {
        for (var i = 0, len = this.list.length; i < len; i++) {
            this.list[i].draw(cxt);
        }
    }
    SakuraList.prototype.get = function (i) {
        return this.list[i];
    }
    SakuraList.prototype.size = function () {
        return this.list.length;
    }

    function getRandom(option) {
        var ret, random;
        switch (option) {
            case 'x':
                ret = Math.random() * window.innerWidth;
                break;
            case 'y':
                ret = Math.random() * window.innerHeight;
                break;
            case 's':
                ret = Math.random();
                break;
            case 'r':
                ret = Math.random() * 6;
                break;
            case 'fnx':
                random = -0.5 + Math.random() * 1;
                ret = function (x, y) {
                    return x + 0.5 * random - 1.7;
                };
                break;
            case 'fny':
                random = 1.5 + Math.random() * 0.7
                ret = function (x, y) {
                    return y + random;
                };
                break;
            case 'fnr':
                random = Math.random() * 0.03;
                ret = function (r) {
                    return r + random;
                };
                break;
        }
        return ret;
    }

    function startSakura() {

        requestAnimationFrame = window.requestAnimationFrame ||
            window.mozRequestAnimationFrame ||
            window.webkitRequestAnimationFrame ||
            window.msRequestAnimationFrame ||
            window.oRequestAnimationFrame;
        var canvas = document.createElement('canvas'),
            cxt;
        staticx = true;
        canvas.height = window.innerHeight;
        canvas.width = window.innerWidth;
        canvas.setAttribute('style', 'position: fixed;left: 0;top: 0;pointer-events: none;');
        canvas.setAttribute('id', 'canvas_sakura');
        document.getElementsByTagName('body')[0].appendChild(canvas);
        cxt = canvas.getContext('2d');
        var sakuraList = new SakuraList();
        for (var i = 0; i < 50; i++) {
            var sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;
            randomX = getRandom('x');
            randomY = getRandom('y');
            randomR = getRandom('r');
            randomS = getRandom('s');
            randomFnx = getRandom('fnx');
            randomFny = getRandom('fny');
            randomFnR = getRandom('fnr');
            sakura = new Sakura(randomX, randomY, randomS, randomR, {
                x: randomFnx,
                y: randomFny,
                r: randomFnR
            });
            sakura.draw(cxt);
            sakuraList.push(sakura);
        }
        stop = requestAnimationFrame(function () {
            cxt.clearRect(0, 0, canvas.width, canvas.height);
            sakuraList.update();
            sakuraList.draw(cxt);
            stop = requestAnimationFrame(arguments.callee);
        })
    }

    window.onresize = function () {
        var canvasSnow = document.getElementById('canvas_snow');
        canvasSnow.width = window.innerWidth;
        canvasSnow.height = window.innerHeight;
    }

    img.onload = function () {
        startSakura();
    }

    function stopp() {
        if (staticx) {
            var child = document.getElementById("canvas_sakura");
            child.parentNode.removeChild(child);
            window.cancelAnimationFrame(stop);
            staticx = false;
        } else {
            startSakura();
        }
    }
</script>

<script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap-3.4.1/js/bootstrap.js' %}"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery.scrollto@2.1.2/jquery.scrollTo.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/autoload.js"></script>
</body>
</html>
